import ProCard from "@ant-design/pro-card";
import { Typography, Table } from "antd";
import React from "react";

type LogLine = {
    timestamp: Date, message: string
}

export type LogViewerProps = {
    logLines: Array<LogLine>
}

const LogViewer: React.FC<LogViewerProps> = (props) => {
    return (
        // <div
        //     style={{
        //         // height: "800px",
        //         width: "70%",
        //         overflow: "auto"
        //     }}
        // >
            <div
                style={{ backgroundColor: "black", overflow: "auto", padding: 10, height: 450 }}
            >
                {
                    props.logLines.map((val) => {
                        return (
                            <Typography
                                style={{ whiteSpace: "nowrap", color: "white" }}
                            >
                                {val.timestamp.toISOString() + "\t\t" + val.message}
                            </Typography>
                        );
                    })
                }
            </div>
        // </div>
        // <Table<LogLine>
        //     scroll={{ x: true, y: 450 }}
        //     columns={[
        //         {
        //             title: 'Timestamp',
        //             dataIndex: 'timestamp',
        //             render: val => val.toISOString()
        //         },
        //         {
        //             title: 'Message',
        //             dataIndex: 'message',
        //             width: 9999999999
        //         }
        //     ]}
        //     dataSource={props.logLines}
        //     sticky
        //     showHeader={false}
        //     pagination={false}
        //     style={{ width: "100%" }}
        // />
    );
}

export default LogViewer